$reportPageHeader: 64px;
.edit-custom-report {
  min-width: 1024px;
  min-height: 768px;
  overflow: auto;
  .page-header{
    height: $reportPageHeader;
    line-height: $reportPageHeader;
    background: #2A3859;
    padding: 0 20px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    .left{
      flex: 1;
    }
    .right{
      flex: 1;
      text-align: right;
    }
    .anticon-left{
      font-size: 20px;
      height: 100%;
      line-height: $reportPageHeader;
      vertical-align: top;
      cursor: pointer;
    }
    .report-name{
      font-weight: 500;
      font-size: 20px;
      text-align: left;
      line-height: 32px;
      margin-left: 12px;
    }
  }
  .page-body {

    .ant-layout-content {
      min-height: 736px;

      .data-box {
        padding-left: 20px;
        background-color: #fff;
        padding-right: 20px;
        padding-bottom: 20px;

        .all-modal-tab {
          width: calc(100vw - 320px);
          margin: 0 -20px;
          .ant-tabs-bar {
            padding: 0 300px 0 20px;
          }
        }

        .choose-box {
          height: 48px;

          .choose-flex-box {
            position: relative;
            display: flex;
            .input-search {
              position: absolute;
              top: 11px;
              right: 0;
              &.single-mode {
                top: 0px;
              }
              .ant-input-search-icon {
                color: #B5C0CE;
              }
              .ant-input {
                height: 26px;
              }
            }
          }

          .choose-box-title {
            text-overflow: ellipsis;
            word-break: break-all;
            margin-right: 20px;
            font-weight: 500;
            font-size: 16px;
            color: #1E2126;
            text-align: left;
            line-height: 24px;
            display: inline-block;
          }

          &.padding-bottom {
            padding: 12px 0;
          }
          .ant-select {
            display: inline-block;
            .ant-select-selection--single {
              height: 26px;
              .ant-select-selection__rendered {
                line-height: 24px;
              }
            }
          }
        }
        .data-list-box {
          margin-top: 6px;
          position: relative;
          width: calc(100% + 16px);
          height: 170px;
          overflow: auto;
          scroll-behavior: smooth; //部分浏览器生效

          .data-drag-item-wrapper {
            min-width: 200px;
            display: inline-block;

            .touch-area {
              background: #fff;
              cursor: pointer;
              display: inline-block;
              font-size: 14px;
              color: #4E5B71;
              line-height: 20px;
              padding: 3px 12px;
              margin: 1px 4px;
              transition: all ease 0.3s;

              &.high-light {
                border-radius: 14px;
                background: #E0EAFF;
                color: #1F70FC;
                font-weight: 500;
              }
            }
            //height: 28px;
            //padding: 5px 10px;
            //border-radius: 28px;
            //background-color: #0E7BEE;
            //color: #fff;
            //margin: 10px 20px;
          }
          /*滚动条整体样式*/
          &::-webkit-scrollbar {
            width: 8px;
            height: 0;
          }
          /*滚动条滑块*/
          &::-webkit-scrollbar-thumb {
            width: 8px;
            background: #B5C0CE;
            border-radius: 4px;
          }
          /*滚动条轨道*/
          &::-webkit-scrollbar-track {
            background: #F7F8FA;
          }

          .attributes-list {
            .single-modal {
              .modal-title {
                font-weight: 500;
                font-size: 14px;
                color: #1E2126;
                text-align: left;
                line-height: 24px;
              }
            }
            .search-no-data {
              user-select: none;
              cursor: default;
              font-size: 14px;
              color: #848C95;
              line-height: 20px;
            }
          }
        }
        .dimension-box, .indicator-box, .show-box, .criteria-box {
          cursor: pointer;

          .custom-report-data-content {
            position: relative;
            border: 1px solid #CDD7EC;
            padding: 8px 12px;
            margin-top: 12px;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: nowrap;
            width: 100%;
            border-radius: 4px;

            .dimension-title {
              line-height: 24px;
              flex-shrink: 0;
              margin-right: 8px;
            }
            .dimension-list {
              position: relative;
              margin-bottom: -8px;

              .insert-line {
                display: block;
                animation: pointerFrame 1.6s cubic-bezier(1, 0, 0, 1) 0s infinite alternate;
                content: '';
                position: absolute;
                width: 2px;
                height: 24px;
                border-radius: 2px;
                background: #1F70FC;
                top: 0px;
                left: -3px;

                &.hide {
                  display: none;
                }
              }

              .wrapped-data-dropped-item {
                cursor: pointer;
                position: relative;
                display: inline-block;
                height: 24px;
                padding: 4px 8px;
                background: #F7F8FA;
                border: 1px solid #F7F8FA;
                border-radius: 14px;
                font-size: 12px;
                color: #1E2126;
                text-align: left;
                line-height: 16px;
                margin-right: 8px;
                margin-bottom: 8px;
                &.hover{
                  &:after{
                    animation: pointerFrame 1.6s cubic-bezier(1, 0, 0, 1) 0s infinite alternate;
                    content: '';
                    position: absolute;
                    width: 2px;
                    height: 24px;
                    border-radius: 2px;
                    background: #1F70FC;
                    bottom: 0;
                    right: -6px;
                  }
                }

                .anticon-close {
                  visibility: hidden;
                  opacity: 0;
                  margin-left: 2px;
                  font-size: 12px;
                  cursor: pointer;
                  color: #CDD7EC;

                  &:hover {
                    color: #FF6680;
                  }
                }
                .anticon-down {
                  margin-right: 2px;
                  font-size: 12px;
                  cursor: pointer;
                  color: #7E97C5;
                }
                &:hover {
                  .anticon-close {
                    visibility: visible;
                    opacity: 1;
                  }
                  border: 1px solid #4B8DFF;
                }
              }


            }
            &.can-drop-focus {
              //box-shadow: 1px 0 0 1px #0E7BEE;
              border: 1px solid #4B8DFF;
            }
          }
          &.active {
            .custom-report-data-content {
              border: 1px solid #4B8DFF !important;
            }
          }
          &:focus {
            outline: none;
          }
        }
        .place-holder {
          position: absolute;
          text-align: center;
          user-select: none;
          font-size: 14px;
          color: #C2C2C2;
          line-height: 16px;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .graphic-box {
        padding: 0 20px;

        .tip {
          font-size: 14px;
          color: #4E5B71;
          text-align: center;
          margin-top: 16px;
          margin-bottom: 12px;
          .anticon-exclamation-circle-o {
            color: #4B8DFF;
          }
        }
        .e-chart {
          background-color: #fff;
          width: 100%;
          height: 500px;
          position: relative;

          .index-advance-search {

            .place-holder {
              position: absolute;
              text-align: center;
              user-select: none;
              font-size: 14px;
              color: #C2C2C2;
              line-height: 16px;
              left: 50%;
              top: 45%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
    }

    .ant-layout-sider {
      //height: calc(100vh - 64px);
      //min-height: 846px;
      border-left: 1px solid #EBF0F5;
      //box-shadow: -1px 0 0 0 #EBF0F5;

      .ant-layout-sider-children {
        .ant-tabs {

          .ant-tabs-bar {
            .ant-tabs-nav-container {
              padding: 0 20px;
            }
          }

          .ant-tabs-content {
            padding-left: 20px;

            .ant-tabs-tabpane {
              height: calc(100vh - 128px);
              min-height: 736px;
              padding-right: 20px;
              overflow-x: hidden;
              overflow-y: auto;
              /*滚动条整体样式*/
              &::-webkit-scrollbar {
                width: 8px;
                height: 0;
              }
              /*滚动条滑块*/
              &::-webkit-scrollbar-thumb {
                width: 8px;
                background: #B5C0CE;
                border-radius: 4px;
              }
              /*滚动条轨道*/
              &::-webkit-scrollbar-track {
                background: #F7F8FA;
              }
            }

            .form-box {
              margin-bottom: -16px;

              .ant-form-item {
                .ant-form-item-label .ant-form-item-required {
                  font-size: 14px;
                  color: #4E5B71;
                  line-height: 20px;
                }
              }
            }

            .graphic-info-box {
              margin-bottom: 12px;

              .info-title {
                font-size: 16px;
                color: #1E2126;
                line-height: 24px;
                font-weight: 500;
                margin-bottom: 12px;
              }

              .flex-wrapper {
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                margin-right: -19.5px;
                .graphic-item-content {
                  margin-bottom: 12px;
                  margin-right: 19.5px;
                  position: relative;
                  text-align: center;
                  width: 80px;
                  height: 80px;
                  &:hover {
                    background: #F4F8FF;
                    cursor: pointer;
                  }
                  .img-wrapper {
                    position: relative;
                    left: 50%;
                    margin-left: -24px;
                    margin-top: 8px;
                    width: 48px;
                    height: 48px;
                    .img {
                      width: 48px;
                      height: 48px;
                    }
                  }
                  .menu-title {
                    margin-top: 4px;
                    font-size: 12px;
                    color: #606060;
                    line-height: 16px;
                  }
                  &.active {
                    background: #F4F8FF;
                  }
                  &.disable {
                    cursor: not-allowed;
                    filter: brightness(50%);
                  }

                  &.pieDisable {
                    cursor: not-allowed;
                    .img-wrapper .img {
                      filter: grayscale(1);
                    }
                    &:hover {
                      background-color: #fff;
                    }
                  }
                }

                .font-size-box {
                  cursor: pointer;
                  user-select: none;
                  text-align: center;
                  width: 65px;
                  height: 65px;
                  border: 1px solid #ffffff;
                  color: #0A0F1E;
                  line-height: 60px;
                  &.font-14 {
                    font-size: 14px;
                  }
                  &.font-21 {
                    font-size: 21px;
                  }
                  &.font-28 {
                    font-size: 28px;
                  }
                  &.font-35 {
                    font-size: 35px;
                  }
                  &:hover {
                    background-color: #F4F8FF;
                  }
                  &.active {
                    background-color: #F4F8FF;
                  }
                }
              }

              .display-setting-list {
                .single-check {
                  margin-bottom: 12px;
                  .ant-input-number {
                    height: 26px;
                    .ant-input-number-input {
                      height: 24px;
                    }
                  }
                  .ant-select {
                    .ant-select-selection--single {
                      height: 26px;
                      .ant-select-selection__rendered {
                        line-height: 24px;
                      }
                    }
                  }
                }
              }

              .default-value-list {
                .single-check {
                  margin-bottom: 12px;
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;

                  .check-name {
                    flex-shrink: 0;
                    line-height: 32px;
                    display: inline-block;
                    width: 130px;
                    word-break: break-all;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    margin-right: 10px;
                  }
                }
              }

              .linkable-checkbox-wrapper {
                .ant-checkbox-wrapper {
                  margin-bottom: 8px;
                }
                .ant-checkbox-group {
                  display: flex;
                  flex-direction: column;

                  .ant-checkbox-group-item {
                    margin-bottom: 8px;
                  }
                }
                .ant-checkbox + span {
                  padding-left: 12px;
                }
                .ant-checkbox-inner {
                  border-radius: 3px;
                }
              }

              &.en {
                .graphic-item-content {
                  .menu-title {
                    margin-top: 0;
                  }
                  .img-wrapper {
                    margin-top: 2px;
                  }
                }
              }

            }
          }
        }
      }
    }

  }
}

.custom-report-sub-menu-id {
  z-index: 1050;
  .ant-dropdown-menu-item {
    text-align: left;

    .flex-box {
      min-width: 80px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .anticon-check {
        color: #4B8DFF;
        line-height: 22px;
        display: inline-block;
      }
    }
  }
}

.custom-report-menu-class {
  .ant-dropdown-menu-item {
    text-align: left;
  }
}

@keyframes pointerFrame
{
  0%   {opacity: 0}
  33%  {opacity: 1}
  66%  {opacity: 0}
  100%  {opacity: 1}
}
